<template>
  <div class="dialog">
    <!-- 状态窗控件 -->
    <el-dialog
      width="60%"
      style="min-height: 500px"
      class="lt-dialog"
      :visible.sync="Dialog"
      @close="closeDialog"
      append-to-body
      :close-on-click-modal="false"
    >
      <div slot="title" class="clearfix">
        <span class="title_top">{{ title }}状态详情</span>
      </div>
      <el-table
        :data="tableData"
        v-loading="loading"
        :max-height="400"
        border
        style="width: 100%; height: auto"
        empty-text=" "
        element-loading-text="加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <el-table-column label="序号" width="60">
          <template slot-scope="{ $index }">
            {{ $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="gongxu" label="工序"></el-table-column>
        <el-table-column prop="devSn" label="机台号"></el-table-column>
        <el-table-column prop="stateCode" label="状态">
          <template slot-scope="{ row }">
            {{ getHeadName(row.stateCode) }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "dialog_status",
  data() {
    return {
      Dialog: false,
      title: "",
      data: "",
      tableData: [],
      loading: true
    };
  },

  mounted() {},
  computed: {
    runningStatusDetailState() {
      return this.$store.state.runningStatusDetail;
    }
  },
  watch: {
    runningStatusDetailState: {
      immediate: true,
      handler(val) {
        if (val.code == -1) {
          this.$message("查询数据失败！");
          this.loading = false;
          this.closeDialog();
        } else if (val.code == 1) {
          let { data } = val;
          this.tableData = data;
          this.loading = false;
        }
      }
    }
  },
  methods: {
    showDialog(data) {
      this.data = data;
      this.title = data.label;
      this.Dialog = true;
    },
    getHeadName(stateCode) {
      switch (parseInt(stateCode)) {
        //运行
        case 1:
          return "运行";
        //停止
        case 2:
          return "停止";
        //故障
        case 3:
          return "故障";
        //满纱满桶
        case 4:
          return "满纱满桶";
        //通讯失败
        case 5:
          return "通讯故障";
        // 计划停台
        case 6:
          return "计划停台";
        default:
          return "通讯故障";
      }
    },
    closeDialog() {
      this.Dialog = false;
      this.loading = true;
      this.tableData = [];
      this.$parent.closeHandle();
    }
  }
};
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 5px;
  &:last-child {
    margin-bottom: 0;
  }
}
.echarts {
  width: 100%;
  height: 200px;
}
.title {
  color: rgb(111, 155, 184);
}
</style>

<style lang="scss">
.lt-dialog {
  .el-dialog__body .el-table.fixed-table .el-table__row td {
    height: 44px;
    padding: 0;
  }
  .el-table__fixed {
    box-shadow: 0 2px 10px rgb(0 0 0) !important;
  }
}
</style>
